<template>
    <div class="app-container">
        <div ref="charts"  class="charts"  ></div>
    </div>
</template>
<script>

import moment from "moment";
import {getMaterialavg,getschoolavg } from "@/api/qu/qycktf";
export default {
  name: "qjtj",
  data() {
    return {
        queryParams:{
            type:'1',
            nature:'',
            semId:''
        },
        charts:null,
        cornerList:[
            {name:'园所1',quj1:'1',quj2:'1',quj3:'1'},
            {name:'园所2',quj1:'1',quj2:'1',quj3:'1'},
            {name:'园所3',quj1:'1',quj2:'1',quj3:'1'},
        ],
        cornerTypeOptions:[],
    };
  },
  created() {
    this.getDicts("corner_type").then(response => {
          this.cornerTypeOptions = response.data;
        });
  },
  mounted(){
        this.charts = this.$echarts.init(this.$refs.charts);
        this.getList();
   },
  methods: {
    async getList(){
    //   try {
    //     const data =  await getMaterialavg({})
    //     this.cornerList=data.rows.map(item=>{
    //       return {
    //              name:this.cornerTypeFormat(item),
    //              value:item.materialCount,
    //              avg:item.materialAvg,
    //            }
    //     });
        this.cornerChartFn();
    //   } catch (error) {
    //     console.log(error);
    //   }
    },
    // 区角类型字典翻译
    cornerTypeFormat(row) {
          return this.selectDictLabel(this.cornerTypeOptions, row.cornerType);
       },
    //全区不同材料的数量统计
    cornerChartFn(){
        const option = {
         // backgroud:'#333',
         title: {
           text: '各园区角统计情况',
          //  subtext: '纯属虚构',
           left: 'left'
         },
         dataZoom:{
            bottom:0,
            show:8/this.cornerList.length<1,
            // show:true,
            type:'slider',
            zoomLock:true,
            brushSelect:false,
            height:8,
            // backgroundColor:'#000000',
            handleSize:'0',
            // moveHandleSize:1,
            // moveHandleStyle:{
            //   borderType:'dotted'
            // },
            sow:true,
            xAxisIndex:[0],
            start:0,
            end:8/this.cornerList.length*100
        },
         tooltip: {
              trigger: 'item',
             
          },
          legend: {
            selectedMode: 'single',
            top:0,
              left:'right',
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               rotate:0,
               interval: 0,//使x轴文字显示全
              },
              data: this.cornerList.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value'
              }
          ],
          color:['#5ab1ef','#2ec7c9',],
          series: [
              {
                  name: '区角1',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.cornerList.map(item=>{ return{name:item.name,value:item.quj1}})
              },
              {
                  name: '区角2',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.cornerList.map(item=>{ return{name:item.name,value:item.quj2}})
              },
              {
                  name: '区角3',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.cornerList.map(item=>{ return{name:item.name,value:item.quj3}})
              },
             
          ]
          }
          this.charts.setOption(option);
          window.addEventListener("resize", this.monitorResize);
    },
     //地图监听窗口缩放事件
     monitorResize(){
        this.charts.resize();
      },
  
  }
};
</script>

<style lang="scss" scoped>
.charts{
    margin-top:10px;
    width: 95%;
    height: 500px;
}
</style>